<template>
    <div>
        <div class="page-header">
            <Row>
                <Col span="5">
                    <Input  placeholder="地区" clearable style="width: 200px" />
                </Col>
                <Col span="5">
                    <Input  placeholder="人数" clearable style="width: 200px" />
                </Col>
                <Col span="4">
                    <Button type="primary" class="lyx-mr10">查询</Button>
                </Col>
            </Row>
        </div>
        <Tabs value="name1">
            <TabPane label="单位类型统计" name="name1">
                <Table border :columns="columns12" :data="data6">
                    <template slot="action">
                        <Button type="primary" size="small" style="margin-right: 5px" @click="show">详情</Button>
                    </template>
                </Table>
                <Row type="flex" justify="space-between" class="lyx-mb10">
                    <Col span="12">
                        <!--                    <Button @click="handleSelectAll(true)" class="lyx-mr10">全选</Button>-->
                        <!--                    <Button @click="handleSelectAll(false)">取消</Button>-->
                    </Col>
                    <Col span="12">
                        <Page :total="100" show-total />
                    </Col>
                </Row>
            </TabPane>
            <TabPane label="工作类型统计" name="name2">
                <Table border :columns="columns11" :data="data5">
                    <template slot="action">
                        <Button type="primary" size="small" style="margin-right: 5px" @click="show">详情</Button>
                    </template>
                </Table>
                <Row type="flex" justify="space-between" class="lyx-mb10">
                    <Col span="12">
                        <!--                    <Button @click="handleSelectAll(true)" class="lyx-mr10">全选</Button>-->
                        <!--                    <Button @click="handleSelectAll(false)">取消</Button>-->
                    </Col>
                    <Col span="12">
                        <Page :total="100" show-total />
                    </Col>
                </Row>
            </TabPane>
        </Tabs>
<div>
    <Modal
            v-model="model1"
            title="详情"
    >
        <Row>
            <Col span="12">
                <Input  placeholder="姓名" clearable style="width: 200px; margin-left: 180px;margin-bottom: 20px" />
            </Col>
            <Col span="12">
                <Button type="primary" style="margin-left: 150px;margin-bottom: 20px" >搜索</Button>
        </Col>

        </Row>
        <Row style="text-align:center;">
            <Col :span="6">
                <div><img src="../../../../assets/images/1.jpg" style="width: 100px;height: 120px"></div>
                <p>姓名：李君昊</p>
                <p>职位：火化师</p>
                <p>单位：皇姑区</p>
            </Col>
            <Col :span="6">
                <div><img src="../../../../assets/images/3.jpg" style="width: 100px;height: 120px"></div>
                <p>姓名：赵朵雯</p>
                <p>职位：火化师</p>
                <p>单位：皇姑区</p>
            </Col>
            <Col :span="6">
                <div><img src="../../../../assets/images/4.jpg" style="width: 100px;height: 120px"></div>
                <p>姓名：孙瑾宛</p>
                <p>职位：殡导师</p>
                <p>单位：皇姑区</p>
            </Col>
            <Col :span="6">
                <div><img src="../../../../assets/images/5.jpg" style="width: 100px;height: 120px"></div>
                <p>姓名：周若蕴</p>
                <p>职位：殡导师</p>
                <p>单位：皇姑区</p>
            </Col>
        </Row>
        <Row style="text-align:center;">
            <Col :span="6">
                <div><img src="../../../../assets/images/7.jpg" style="width: 100px;height: 120px"></div>
                <p>姓名：吴艾莲</p>
                <p>职位：殡导师</p>
                <p>单位：皇姑区</p>
            </Col>
            <Col :span="6">
                <div><img src="../../../../assets/images/8.jpg" style="width: 100px;height: 120px"></div>
                <p>姓名：王蓓蕾</p>
                <p>职位：化妆师</p>
                <p>单位：皇姑</p>
            </Col>
            <Col :span="6">
                <div><img src="../../../../assets/images/index.jpg" style="width: 100px;height: 120px"></div>
                <p>姓名：李萦岑</p>
                <p>职位：司仪</p>
                <p>单位：皇姑区</p>
            </Col>
            <Col :span="6">
                <div><img src="../../../../assets/images/2.jpg" style="width: 100px;height: 120px"></div>
                <p>姓名：李璐蔓</p>
                <p>职位：司仪</p>
                <p>单位：皇姑区</p>
            </Col>
        </Row>
        <div slot="footer">
            <Button type="success"   @click="close">关闭</Button>
        </div>

    </Modal>
</div>
    </div>
</template>

<script>
export default {

  data () {
    return {
      columns12: [
        {
          title: '区域',
          key: 'area'
        },
        {
          title: '单位类型',
          key: 'flat'
        },
        {
          title: '人数',
          key: 'people'
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      data6: [
        {
          area: '皇姑区',
          flat: '火葬场',
          people: '20'
        },
        {
          area: '沈河区',
          flat: '骨灰堂',
          people: '20'
        },
        {
          area: '于洪区',
          flat: '骨灰堂',
          people: '20'
        },
        {
          area: '大东区',
          flat: '骨灰堂',
          people: '20'
        },
        {
          area: '铁西区',
          flat: '公墓',
          people: '20'
        },
        {
          area: '和平区',
          flat: '公墓',
          people: '20'
        },
        {
          area: '浑南区',
          flat: '火葬场',
          people: '20'
        }
      ],
      columns11: [
        {
          title: '区域',
          key: 'area'
        },
        {
          title: '工作类型',
          key: 'flat'
        },
        {
          title: '人数',
          key: 'people'
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      data5: [
        {
          area: '皇姑区',
          flat: '火化师',
          people: '5'
        },
        {
          area: '沈河区',
          flat: '销售员',
          people: '5'
        },
        {
          area: '大东区',
          flat: '殡导师',
          people: '5'
        },
        {
          area: '浑南区',
          flat: '化妆师',
          people: '5'
        },
        {
          area: '沈北新区',
          flat: '司仪',
          people: '5'
        },
        {
          area: '于洪区',
          flat: '司仪',
          people: '5'
        },
        {
          area: '铁西区',
          flat: '化妆师',
          people: '5'
        }
      ],
      model1: false
    }
  },
  methods: {
    show () {
      this.model1 = true
    },
    close () {
      this.model1 = false
    }
  }
}

</script>

<style scoped>
    .page-header{
        margin-bottom: 20px;
    }
    .lyx-mr10{
        margin-right: 10px;
    }
    .lyx-mb10{
        margin-bottom: 10px;
    }
</style>
